<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <link href="../css/mui.min.css" rel="stylesheet">
      <link rel="stylesheet" type="text/css" href="../css/mescroll.min.css"/>

      <style>
          html,body{
              height: 100%;
              /*overflow: auto;*/
          }
          .mui-content {
            background-color: #fff;
          }
          .mui-table-view {
            margin: 10px 0px;
            /*border: 1px solid #ccc;*/
            /*border-bottom: 0;*/
            padding: 0px 4px;
          }
          /*.mui-table-view:last-child {
            margin-bottom: 0;
            background-color: red;
          }*/
          .tableListone {
            display: inline-block;
            /*padding: 4px 0px;*/
          }
          .tableListtwo {
            display: inline-block;
            padding-left: 15px;
          }
          .tableLine {
            padding: 4px 0px;
          }
          .normal {
            color: green;
          }
          .abnormal {
            color: red;
          }
      </style>
  </head>
  <body>
    <div id="main">
      <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
        <div class="mescroll" id="mescroll">
          <!--数据列表-->
          <ul class="mui-table-view-chevron" id="tabview">
          </ul>
        </div>
      </div>
    </ul>
    </div>
  </body>
  <script id="template" type="text/x-dot-template">
  {{ for (var key in it) { }}
  <div class="mui-table-view">
    <div class="tableLine">
      <span class="tableListone" style="font-weight: bold;">{{=it[key].name}}</span>
    </div>
    <div class="tableLine">
      {{? it[key].EquipmentStatus !== 'Not Cleaned'}}
      <span class="tableListone">Cleaned Status：</span> <span class="abnormal">{{=it[key].CleanedStatus}}</span>
      {{??}}
      <span class="tableListone">Cleaned Status：</span> <span class="normal">{{=it[key].CleanedStatus}}</span>
      {{? }}
    </div>
      <div class="tableLine">
    {{? it[key].EquipmentStatus === 'Failure'}}
    <span class="tableListone">EquipmentStatus：</span> <span class="abnormal">{{=it[key].EquipmentStatus}}</span>
    {{??}}
    <span class="tableListone">EquipmentStatus：</span> <span class="normal">{{=it[key].EquipmentStatus}}</span>
    {{? }}
    </div>
    <div class="tableLine">
      {{? it[key].RecyclableWaste === '5'}}
      <span class="tableListone">Recyclable Waste：</span> <span class="abnormal">{{=it[key].RecyclableWaste}}</span>
      {{??}}
      <span class="tableListone">Recyclable Waste：</span> <span class="normal">{{=it[key].RecyclableWaste}}</span>
      {{?}}
      {{? it[key].FoodScrap === '5'}}
      <span class="tableListtwo">Food Scrap：</span> <span class="abnormal">{{=it[key].FoodScrap}}</span>
      {{??}}
        <span class="tableListtwo">Food Scrap：</span> <span class="normal">{{=it[key].FoodScrap}}</span>
        {{?}}
    </div>
    <div class="tableLine">
      {{? it[key].OtherWaste1 === '5'}}
      <span class="tableListone">Other Waste1：</span> <span class="abnormal">{{=it[key].OtherWaste1}}</span>
      {{??}}
      <span class="tableListone">Other Waste1：</span> <span class="normal">{{=it[key].OtherWaste1}}</span>
      {{?}}
      {{? it[key].OtherWaste2 === '5'}}
      <span class="tableListtwo">Other Waste2：</span> <span class="abnormal">{{=it[key].OtherWaste2}}</span>
      {{??}}
      <span class="tableListtwo">Other Waste2：</span> <span class="normal">{{=it[key].OtherWaste2}}</span>
      {{?}}
    </div>
    <div class="tableLine">
    {{? it[key].LastOnlineTime === null}}
      <span class="tableListone">Last On Line Time：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Last On Line Time：</span> <span>{{=it[key].LastOnlineTime}}</span>
      {{?}}
    </div>
    <div class="tableLine">
      <span>Organization：</span> <span>{{=it[key].Organization}}</span>
    </div>
    <div class="tableLine">
    {{? it[key].Position === ''}}
    <span>Position：</span> <span class="abnormal">No Data</span>
      {{??}}
      <span class="tableListone">Position：</span> <span>{{=it[key].Position}}</span>
      {{? }}
    </div>
  </div>
  {{ } }}
  </script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/doT.min.js"></script>
  <script type="text/javascript" src="../script/mescroll.min.js"></script>
  <script type="text/javascript" src="../script/ajax.js"></script>

  <script type="text/javascript">
      apiready = function(){
        var tabview = $api.byId('tabview');
        var template = $api.byId('template');
        let query = $api.getStorage('query');
        var interText = doT.template(template.innerHTML);
        // var org =  api.pageParam.id;
        var org = api.pageParam.org;
        var full  = api.pageParam.full;
        var clean = api.pageParam.clean;
        var equiment = api.pageParam.equiment;
        function loadMore(page) {
          loadMore2(mescroll, org, full, clean, equiment, interText, page.num, page.size, function (curPageData) {
            mescroll.endByPage(page.size, curPageData.length);
          });
        }
        //  初始化
        var mescroll = new MeScroll("mescroll", {
          //第一个参数"mescroll"对应上面布局结构div的id
          //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
          //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
          down: {
            use: false
          },
          up: {
            auto: true,
            callback: loadMore, //上拉加载的回调
            noMoreSize: 5,
            htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">Loading..</p>',
            isBounce: false //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
          }
        });
      };
  </script>
  </html>
